/*!
 * Cropper v3.0.0
 */

layui.config({
    base: "js/lay/modules/"
}).define(['jquery','layer','cropper'],function (exports) {
    var $ = layui.jquery
        ,layer = layui.layer;
    var html = "<link rel=\"stylesheet\" id=\"mycropper\" href=\"js/css/modules/layer/cropper.css\">" +
        "<div class=\"layui-fluid showImgEdit\" id=\"myshowImg\" style=\"display: none;\padding:15px;\">" +
        "    <div class=\"layui-form-item\">" +
        "        <div class=\"layui-input-inline layui-btn-container\" style=\"width: auto;margin-left:0px;text-align:center\">" +
        "            <label for=\"cropper_avatarImgUpload\" class=\"layui-btn layui-btn-primary\">" +
        "                <i class=\"layui-icon\">&#xe67c;</i>选择图片" +
        "            </label>" +
        "            <input class=\"layui-upload-file\" id=\"cropper_avatarImgUpload\" type=\"file\" value=\"选择图片\" name=\"file\">" +
        "        </div>" +
        "        <div class=\"layui-form-mid layui-word-aux\" style=\"width: 100%;margin-left:0px;text-align:center\">请上传图片进行截取，完成后保存修改即可</div>" +
        "    </div>" +
        "    <div class=\"layui-row layui-col-space15\">" +
        "        <div class=\"layui-col-xs9\">" +
        "            <div class=\"readyimg\" style=\"height:60vh;width:93vw;background-color: rgb(247, 247, 247);\">" +
        "                <img src=\"\" >" +
        "            </div>" +
        "        </div>" +
        "    </div>" +
        "    <div class=\"layui-row layui-col-space15\">" +
        "        <div class=\"layui-col-xs9\">" +
        "            <div class=\"layui-row\">" +
        "                <div class=\"layui-col-xs6\" style=\"display:flex\">" +
        "                    <button type=\"button\" class=\"layui-btn layui-icon layui-icon-left  myuploadimg\" cropper-event=\"rotate\" data-option=\"-15\" title=\"Rotate -90 degrees\"></button>" +
        "                    <button type=\"button\" class=\"layui-btn layui-icon layui-icon-right  myuploadimg\" cropper-event=\"rotate\" data-option=\"15\" title=\"Rotate 90 degrees\"></button>" +
        "                </div>" +
        "                <div class=\"layui-col-xs6\" style=\"text-align: right;\">" +
        "                    <button type=\"button\" class=\"layui-btn   myuploadimg\" cropper-event=\"reset\" title=\"重置图片\">&nbsp;复位</button>" +
        "                </div>" +
        "            </div>" +
        "        </div>" +
        "        <div class=\"layui-col-xs3\">" +
        "            <button class=\"layui-btn layui-btn-fluid myuploadimg\" cropper-event=\"confirmSave\" type=\"button\"> 确定</button>" +
        "        </div>" +
        "    </div>" +
        "</div>";
    var upflag=0;
    var obj = {
        render: function(e){
            $($("#mycropper")).remove()
            $($("#myshowImg")).remove()
            $('body').append(html);
            // $("#layui-layer100001").remove();
            var self = this,
                elem = e.elem,
                saveW = e.saveW,
                saveH = e.saveH,
                mark = e.mark,
                area = e.area,
                url = e.url,
                done = e.done,
                title= e.title;

            var content = $('.showImgEdit')
                ,image = $(".showImgEdit .readyimg img")
                ,preview = '.showImgEdit .img-preview'
                ,file = $(".showImgEdit input[name='file']")
                , options = {aspectRatio: mark,preview: preview,viewMode:1};
            
            $(elem).on('click',function () {
                layer.open({
                    type: 1
                    , content: content
                    , title:title
                    , area: area
                    , success: function () {
                        image.cropper(options);
                    }
                    , cancel: function (index) {
                        layer.close(index);
                        image.cropper('destroy');
                    }
                });
            });
            $(".layui-btn").on('click',function () {
                var event = $(this).attr("cropper-event");
                //监听确认保存图像
                if(event === 'confirmSave'){
                    if(upflag==1){
                        layer.msg("图片正在上传请稍后再试!")
                        return;
                    }
                    upflag=1;
                    image.cropper("getCroppedCanvas",{
                        width: saveW,
                        height: saveH
                    }).toBlob(function(blob){
                        var formData=new FormData();
                        formData.append('file',blob,'head.jpg');
                        $.ajax({
                            method:"post",
                            url: url, //用于文件上传的服务器端请求地址
                            data: formData,
                            processData: false,
                            contentType: false,
                            success:function(result){
                                if(result.code == 1){
                                    layer.closeAll('page');
                                    return done(result);
                                }else{
                                    layer.msg("上传失败")
                                }
                                upflag=0;
                            }
                        });
                    });
                    //监听旋转
                }else if(event === 'rotate'){
                    var option = $(this).attr('data-option');
                    image.cropper('rotate', option);
                    //重设图片
                }else if(event === 'reset'){
                    image.cropper('reset');
                }
                //文件选择
                file.change(function () {
                    var r= new FileReader();
                    var f=this.files[0];
                    r.readAsDataURL(f);
                    r.onload=function (e) {
                        image.cropper('destroy').attr('src', this.result).cropper(options);
                    };
                });
            });
        }
    };
    exports('croppers', obj);
});